<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{http://localhost:8001/}">
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入layui-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!--引入booststrap-->
    <!--<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">-->
    <script th:href="@{/jquery.js}" type="text/javascript"></script>
</head>
<style>
    .weather {
        border: 1px red;
        background-color: aquamarine;
        width: 200px;
        height: 300px;
        float: left;
        margin-left: 20px;
    }

    #ref {
        width: 600px;
        height: 200px;
        background-color: white;
    }

    #d1 {
        background-color: white;
        width: 1500px;
        height: 300px;
    }

    .layui-form-label {
        width: 150px;

    }
</style>
<body>
<h1 style="align-content: center">天气预报系统</h1>
<table>
    <tr>
        <td>
            <h2>选择地区:</h2>
        </td>
        <td>
            <!-- 省 -->
            <select class="layui-form-label" th:th:id="province" th:name="province" onchange="changeCity()">
                <option value="">请选择省</option>
            </select>&nbsp;&nbsp;&nbsp;
            <!-- 市 -->
            <select class="layui-form-label" th:id="city" th:name="city" th:onchange="changeDistrict()">
                <option value="">请选择市</option>
            </select>&nbsp;&nbsp;&nbsp;
            <!-- 县(区) -->
            <select class="layui-form-label" th:id="district" th:name="district" th:onchange="changeDhiddenValue()">
                <option value="">请选择县(区)</option>
            </select>

            <!-- 添加隐藏域，用来提交给后台省市区对应的中文名 -->
            <input type="hidden" th:name="phidden" th:id="phidden">
            <input type="hidden" th:name="chidden" th:id="chidden">
            <input type="hidden" th:name="dhidden" th:id="dhidden">
        </td>

    </tr>

</table>


<br>
<br>
<!--定义头标签让他们追加到这里-->
<div id="ref">

</div>

<!--定义一个底部的模板
    让未来几天的数据在这个模板上排序👇
    -->
<div id="d1">

</div>


</body>
<!--<%&#45;&#45;切记切记要记得引 jquery包&#45;&#45;%>-->
<script th:src="@{/jquery.js}"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",//请求类型
            url: "citys",//url地址
            dataType: "json",//
            success: function (data) {//后端返回的数据
                for (var i = 0; i < data.length; i++) {//循环
                    //               拿到所有省份数据
                    var $option = $("<option value='" + data[i].provinceZh + "'>" + data[i].provinceZh + "</option>");
                    /*拼接到 select标签中*/
                    $("#province").append($option);
                }
            }
        });
    });

    function changeCity() {

        //当省的内容发生变化的时候，响应的改变省的隐藏域的值
        $("#phidden").val($("#province option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        //获取省份
        var prName = $("#province").val();
        $.ajax({
            url: "leas",
            data: {"provinceZh": prName},
            dataType: "json",
            success: function (data) {
                //清空城市下拉列表框的内容
                $("#city").html("<option value=''>请选择市</option>");
                $("#district").html("<option value=''>请选择区/县</option>");
                //遍历json，json数组中每一个json，都对应一个省的信息，都应该在省的下拉列表框下面添加一个<option>
                for (var i = 0; i < data.length; i++) {
                    var $option = $("<option value='" + data[i].leaderZh + "'>" + data[i].leaderZh + "</option>");
                    $("#city").append($option);
                }
            }
        });
    }

    function changeDistrict() {
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#chidden").val($("#city option:selected").html());
        //页面加载完成，将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        //获取市
        var citName = $("#city").val();
        //获取省份
        var prName = $("#province").val();
        $.ajax({
            url: "citZh",
            data: {
                "leaderZh": citName,
                "pName": prName
            },

            dataType: "json",
            success: function (data) {
                //清空城市下拉列表框的内容
                $("#district").html("<option value=''>请选择区/县</option>");
                for (var i = 0; i < data.length; i++) {
                    var $option = $("<option value='" + data[i].id + "'>" + data[i].cityZh + "</option>");
                    $("#district").append($option);
                }
            }
        });
    }

    function changeDhiddenValue() {
        //当城市的内容发生变化的时候，相应的改变城市的隐藏域的值
        $("#dhidden").val($("#district option:selected").html());
        $("#d1").html("");
        /*如果第二次查询.会重复,所以这里要把之前的数据清空*/
        $("#ref").html("");
        /*将头标签中的数据清空*/


        var cid = $("#district").val();
        $.ajax({
            url: "cityId",
            data: {"id": cid},
            dataType: "json",
            success: function (datas) {/*如果成功拿到数据*/
                //清空城市下拉列表框的内容
                /*头数据 追加一个div*/
                var $head = $("<div id='" + 'd3' + "' style='background-color: papayawhip;width: 500px;height: 150px;padding: 20px;'>" +
                    "       <h3  id='" + 'h1' + "'></h3>\n" + "<br>" +
                    "        <h3 id='" + 'h2' + "'></h3>\n" + "<br>" +
                    "        <h3 id='" + 'h3' + "'></h3></div>")
                /*追加到上边的div中*/
                $("#ref").append($head);
                /*将值修改*/
                $("#h1").text("当前城市: " + datas.data.city);

                $("#h2").text("温度: " + datas.data.wendu);

                $("#h3").text("感冒指数: " + datas.data.ganmao);

                /*padding: 20px 内边距*/
                /*margin-left: 30px 自身的间距*/
                /*float:left  div 左浮动 */
                /*昨天数据*/
                /*创建一个div追加大的div中*/
                var $div2 = $("<div id='" + 'd2' + "' style='background-color: gainsboro;width: 200px;height: 300px;float:left;margin-left: 30px;padding: 20px;'>" +
                    "       <h3 id='" + 'y4' + "'></h3>\n" + "<br>" +
                    "        <h3 id='" + 'y5' + "'></h3>\n" + "<br>" +
                    "        <h3 id='" + 'y6' + "'></h3>\n" + "<br>" +
                    "        <h3 id='" + 'y7' + "'></a></h3>\n" + "<br>" +
                    "        <h3 id='" + 'y8' + "'></h3>\n" + "<br>" +
                    "        <h3 id='" + 'y9' + "'></h3></div>")
                /*追加div*/
                $("#d1").append($div2);
                /*修改指定id的文本*/
                $("#y4").text("日期: " + datas.data.yesterday.date);
                /*修改指定id的文本*/
                $("#y5").text("最高温度: " + datas.data.yesterday.high);

                $("#y6").text("风向: " + datas.data.yesterday.fx);

                $("#y7").text("最低温度: " + datas.data.yesterday.low);

                $("#y8").text("风力: " + datas.data.yesterday.fl);

                $("#y9").text("天气: " + datas.data.yesterday.type);


                /*循环数据*/

                /*未来天气数据*/
                for (var i = 0; i < datas.data.forecast.length; i++) {
                    /*循环创建div和p标签*/
                    var $div = $("<div id='" + i + "' style='background-color: #00F7DE;width: 200px;height: 300px;float:left;margin-left: 30px;padding: 20px;'>" +
                        "        <h3 id='" + 'p4' + i + "'></h3>\n" + "<br>" +
                        "        <h3 id='" + 'p5' + i + "'></h3>\n" + "<br>" +
                        "        <h3 id='" + 'p6' + i + "'></h3>\n" + "<br>" +
                        "        <h3 id='" + 'p7' + i + "'></a></h3>\n" + "<br>" +
                        "        <h3 id='" + 'p8' + i + "'></h3>\n" + "<br>" +
                        "        <h3 id='" + 'p9' + i + "'></h3></div>")
                    /*追加到界面上div*/
                    $("#d1").append($div)
                    /*赋值数据*/
                    $("#p4" + i).text("日期: " + datas.data.forecast[i].date);

                    $("#p5" + i).text("最高温度: " + datas.data.forecast[i].high);

                    $("#p6" + i).text("风向: " + datas.data.forecast[i].fengxiang);

                    $("#p7" + i).text("最低温度: " + datas.data.forecast[i].low);

                    $("#p8" + i).text("风力: " + datas.data.forecast[i].fengli);

                    $("#p9" + i).text("天气: " + datas.data.forecast[i].type);

                }

            }
        });
    }
</script>

</html>